import { useState, useEffect } from 'react';
import { loadFaviconWithCache } from '@/lib/faviconCache';
import { getDefaultFaviconSvg } from '@/lib/utils';

/**
 * 网站图标加载Hook
 * 提供带缓存的高性能图标加载，缓存优先，7天过期机制
 * 使用示例：const faviconSrc = useFavicon(tab.url, tab.favicon);
 */
export const useFavicon = (url: string, favicon?: string, options?: { enabled?: boolean }) => {
    const enabled = options?.enabled !== false;
    // 图标源状态：默认使用占位符，避免闪烁
    const [faviconSrc, setFaviconSrc] = useState<string>(getDefaultFaviconSvg);

    useEffect(() => {
        // 异步加载favicon（缓存优先）
        const loadFavicon = async () => {
            try {
                // 使用缓存系统加载图标
                const faviconUrl = await loadFaviconWithCache(url, favicon);
                setFaviconSrc(faviconUrl);
            } catch (error) {
                // 加载失败时保持默认占位符
                console.warn(`useFavicon加载失败 ${url}:`, error);
            }
        };

        // 只有在URL有效时才加载
        if (enabled && url) {
            loadFavicon();
        }
    }, [url, favicon, enabled]);

    return faviconSrc;
};
